<template>
  <el-tabs class="designer-tab" v-model="activeName" type="border-card" :stretch="true">
    <el-tab-pane v-if="isNotEmpty(currentWidget?.options.setup)" name="first" label="配置">
      <component
        :is="currentSetComponent"
        v-model="currentWidget.options.setup"
        @on-changed="changed('setup', $event)"
      />
    </el-tab-pane>
    <el-tab-pane v-if="isNotEmpty(currentWidget?.options.data)" name="second" label="数据">
      <component
        :is="currentDataComponent"
        v-model="currentWidget.options.data"
        @on-changed="changed('data', $event)"
      />
    </el-tab-pane>
    <el-tab-pane v-if="isNotEmpty(currentWidget?.options.position)" name="third" label="坐标">
      <positionForm
        v-model="currentWidget.options.position"
        @on-changed="changed('position', $event)"
      />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import _ from 'lodash'
import positionForm from './form/positionForm.vue'
import { componentDataMap, componentSetMap } from './formMap'

// 创建一个映射表，类型 => 异步组件

const props = defineProps<{
  currentWidget: any
}>()

const emit = defineEmits(['onChanged'])

const { currentWidget } = toRefs(props)

const currentSetComponent = computed(() => {
  return componentSetMap[currentWidget.value.code]
})

const currentDataComponent = computed(() => {
  return componentDataMap[currentWidget.value.code]
})

const activeName = ref('first')

const changed = (type: string, e: any) => {
  emit('onChanged', currentWidget.value, type, e.key, e.val)
}

const isNotEmpty = (val) => {
  return !_.isEmpty(val)
}

watch(
  () => currentWidget.value,
  () => {
    activeName.value = 'first'
  }
)
</script>
<style lang="scss">
.designer-tab {
  .el-tabs__header {
    .el-tabs__nav {
      .el-tabs__item {
        background-color: #242f3b;
        border: 0px;
      }

      .el-tabs__item.is-active {
        background-color: #31455d;
        color: #fff;
      }
    }
  }

  .el-tabs__content {
    background-color: #242a30;
    height: calc(100vh - 39px);
    overflow-x: hidden;
    overflow-y: auto;

    .el-tab-pane {
      color: #bfcbd9;
    }

    &::-webkit-scrollbar {
      width: 5px;
      height: 14px;
    }

    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-thumb {
      border-radius: 1px;
      border: 0 solid transparent;
    }

    &::-webkit-scrollbar-track-piece {
      /*修改滚动条的背景和圆角*/
      background: #29405c;
    }

    &::-webkit-scrollbar-track {
      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
    }

    &::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
    }

    &::-webkit-scrollbar-corner {
      background: transparent;
    }

    /*修改垂直滚动条的样式*/
    &::-webkit-scrollbar-thumb:vertical {
      background-color: #00113a;
      // -webkit-border-radius: 7px;
    }

    /*修改水平滚动条的样式*/
    &::-webkit-scrollbar-thumb:horizontal {
      background-color: #00113a;
      // -webkit-border-radius: 7px;
    }
  }
}
.designer-tab {
  border: 0;
  .el-form-item__label {
    color: #fbfbfb;
  }
  .el-input__wrapper,
  .el-textarea__inner,
  .el-select__wrapper {
    background: #263445 !important;
    border: 1px solid #3f5673;
    box-shadow: none;
    color: #a8e3ff;

    .el-input__inner {
      color: #a8e3ff;
    }

    &.is-focus {
      // border: 1px solid #3f5673;
      box-shadow: none;
    }
  }

  .el-select__placeholder {
    color: #a8e3ff;
  }

  .el-input-group__append,
  .el-input-group__prepend {
    background: #5e6b82 !important;
    border: 0;
    color: #a8e3ff;
    box-shadow: none;
  }

  .el-input-number__increase,
  .el-input-number__decrease {
    background: #5e6b82 !important;
    border: 1px solid #3f5673;
    color: #a8e3ff;
  }
  .el-input-number.is-controls-right .el-input-number__increase {
    height: 15px;
    border-bottom: 1px solid #3f5673;
  }
  .el-input-number.is-controls-right .el-input-number__decrease {
    border-left: 1px solid #3f5673;
  }

  .el-color-picker__color-inner {
    background-color: transparent !important;
  }

  .el-input-group__append,
  .el-input-group__prepend {
    padding: 0 10px;
  }

  .el-collapse {
    border-top: none;
    border-bottom: none;
  }

  .el-collapse-item__header {
    color: #fbfbfb;
    background-color: transparent;
    border-color: #424c60;
    flex-direction: row-reverse;
    justify-content: left;
    height: 40px;

    .el-collapse-item__arrow {
      margin: 0 8px;
    }

    &.is-active {
      background-color: #31455d;
    }
  }
  .el-collapse-item__wrap {
    background-color: transparent;
    border-color: #424c60;
  }

  .el-collapse-item__content {
    padding: 18px 0 0 0;
  }

  .el-slider__runway,
  .el-slider__bar {
    height: 4px;
  }

  .el-slider__button {
    width: 8px;
    height: 8px;
    border-color: #fff;
  }

  .el-radio__label {
    color: #a8e3ff;
  }
}
</style>
